<template>
    <div class="layout-padding">
         <div class="layout-padding-auto layout-padding-view">
        <el-form :model="form" label-width="90px" ref="dataFormRef" v-loading="loading">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="说明" name="inputParams">
                    <el-row :gutter="24" style="max-height: 730px; overflow: auto;">
                        <el-col :span="24" class="mb20">
                            <el-form-item label="API名称：" prop="name">
                                <el-input v-model="form.name" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item label="API编号:" prop="sortId">
                                <el-input v-model="form.sortId" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item label="url:" prop="url">
                                <el-input v-model="form.url" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item label="请求方式:" prop="method">
                                <el-radio-group v-model="form.method">
                                    <el-radio value="GET" size="large" disabled border>GET</el-radio>
                                    <el-radio value="POST" size="large" disabled border>POST</el-radio>
                                    <el-radio value="PUT" size="large" disabled border>PUT</el-radio>
                                    <el-radio value="DELETE" size="large" disabled border>DELETE</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <h3>输入参数</h3><br>
                            <template v-if="form.parameterType === '0'">
                                <el-table :data="form.parameter" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="150" />
                                    <el-table-column label="参数名" width="250">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.name" placeholder="请输入参数名" disabled/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="参数默认值" width="250">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.defaultValue" placeholder="请输入默认值" disabled/>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                            <template v-else>
                                <el-input v-model="form.parameters" style="width: 100%" :rows="10" type="textarea" disabled placeholder="请输入header参数"/>
                            </template>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <h3>header参数</h3><br>
                            <el-table :data="form.header" style="width: 100%">
                                <el-table-column type="index" label="序号" width="150" />
                                <el-table-column label="参数名" width="250">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.name" placeholder="请输入参数名" disabled />
                                    </template>
                                </el-table-column>
                                <el-table-column label="参数默认值" width="250">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.defaultValue" placeholder="请输入默认值" disabled />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="测试" name="headerParams">
                    <el-row :gutter="24" style="max-height: 730px; overflow: auto;">
                        <el-col :span="24" class="mb20">
                                <el-tag type="primary">{{form.method}}</el-tag> <el-input v-model="form.url" style="width: 90%;"/> &nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button type="primary" @click="dispatchs">发送</el-button>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <span>测试说明</span><br><br>
                            <el-input v-model="form.name"  />
                        </el-col>

                        <el-col :span="24" class="mb20">
                            <span>参数类型</span><br><br>
                            <el-radio-group v-model="form.parameterType">
                                <el-radio value="0" size="large" border disabled>键值对Form</el-radio>
                                <el-radio value="1" size="large" border disabled>requestBody字符串</el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <h3>输入参数</h3><br>
                            <template v-if="form.parameterType === '0'">
                                <el-button type="primary" class="transparent-plus-button" style="height: 25px; width: 106px;font-size: 14px;" @click="addParameter">新增</el-button>
                                <el-table :data="form.parameter" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="150" />
                                    <el-table-column label="参数名" width="250">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.name" placeholder="请输入参数名" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="参数默认值" width="250">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.defaultValue" placeholder="请输入默认值" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template #default="scope">
                                            <el-button @click="removeParameter(scope.$index)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                            <template v-else>
                                <el-input v-model="form.parameters" style="width: 100%" :rows="10" type="textarea" placeholder="请输入header参数"/>
                            </template>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <h3>header参数</h3><br>
                            <el-button type="primary" class="transparent-plus-button" style="height: 25px; width: 106px; font-size: 14px;" heig @click="addheaderParameter">新增</el-button>
                            <el-table :data="form.header" style="width: 100%">
                                <el-table-column type="index" label="序号" width="150" />
                                <el-table-column label="参数名" width="250">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.name" placeholder="请输入参数名" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="参数默认值" width="250">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.defaultValue" placeholder="请输入默认值" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template #default="scope">
                                        <el-button @click="removeheaderParameter(scope.$index)" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <span>返回响应</span><br><br>
                            <el-input v-model="form.examples" style="width: 100%;" :rows="10" type="textarea" placeholder=""/>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    import { getObj, sendRequest  } from '/@/api/model/management';

    const loading = ref(false);
    const activeTab = ref('inputParams'); // 默认显示说明页签

    // 定义表单状态
    const form = reactive({
        createBy: '',
        createTime: '',
        id: '',
        sortId: '',
        name: '',
        method: '',
        url: '',
        version: '',
        requestType: '',
        parameterType: '',
        authentication: '',
        status: '',
        binding: '',
        parameters: '',
        examples: '',
        parameter: [] as Array<{ name: string, defaultValue: string }>, // 修改为数组
        header: [] as Array<{ name: string, defaultValue: string }>, // 修改为数组
    });

    // 获取路由参数
    const route = useRoute();

    const fetchModelData = async (id: string) => {
        try {
            loading.value = true;
            const { data } = await getObj(id);
            // 根据parameterType的值来决定是否赋值
            if (data.parameterType === '1') {
                form.parameters = data.parameter;
            } else {
                form.parameter = data.parameter ? JSON.parse(data.parameter) : [];
            }
            form.name = data.name;
            form.url = data.url;
            form.createBy = data.createBy;
            form.createTime = data.createTime;
            form.sortId = data.sortId;
            form.method = data.method;
            form.version = data.version;
            form.requestType = data.requestType;
            form.parameterType = data.parameterType;
            form.authentication = data.authentication;
            form.status = data.status;
            form.binding = data.binding;
            form.header = data.header ? JSON.parse(data.header) : [];
        } catch (error) {
            console.error('Failed to fetch model data:', error);
        } finally {
            loading.value = false;
        }
    };

    // 使用路由参数装载组件时自动获取数据
    onMounted(() => {
        const id = route.query.id as string;
        if (id) {
            fetchModelData(id);
        }
    });

    // 增加参数
    const addParameter = () => {
        form.parameter.push({ name: '', defaultValue: '' });
    };

    // 删除参数
    const removeParameter = (index: number) => {
        form.parameter.splice(index, 1);
    };

    // 增加header参数
    const addheaderParameter = () => {
        form.header.push({ name: '', defaultValue: '' });
    };

    // 删除header参数
    const removeheaderParameter = (index: number) => {
        form.header.splice(index, 1);
    };

    // 发送请求
    const dispatchs = async () => {
        try {
            loading.value = true;

            const params = {
                url: form.url,
                method: form.method,
                parameterType: form.parameterType,
                parameter:  JSON.stringify(form.parameter).replace(/"/g,"'"),
                header: JSON.stringify(form.header).replace(/"/g,"'"),
            };

            // 根据请求类型发送请求 TODO 接口写好在做
            const { data } = await sendRequest(params);
            // 将响应数据填充到表单中
            form.examples = JSON.stringify(data, null, 2);
        } catch (error) {
            console.error('Failed to send request:', error);
            form.examples = '请求失败，请检查控制台获取更多信息。';
        } finally {
            loading.value = false;
        }
    };


    defineExpose({
        fetchModelData
    });
</script>

<style scoped>
    .form-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .transparent-plus-button {
        background-color: transparent !important; /* 设置为透明背景 */
        border-color: #409EFF !important; /* 假设你希望边框颜色与Element UI的primary颜色相同 */
        color: #409EFF !important; /* 文本颜色也设置为相同的颜色 */
        /* 其他你想要的样式，比如字体大小、内边距等 */
        padding: 0 10px; /* 根据需要调整内边距 */
        font-size: 16px; /* 根据需要调整字体大小 */
        line-height: 32px; /* 假设按钮高度为32px，你需要根据实际需要调整 */
        border-radius: 4px; /* 可选的圆角 */
    }

    /* 为加号设置样式 */
    .transparent-plus-button::before {
        content: '+'; /* 显示加号 */
        font-size: 18px; /* 根据需要调整加号的大小 */
        line-height: 32px; /* 确保加号垂直居中 */
    }
</style>
